<template>
  <div>
     <el-button type="success" @click="openDir">添加目录</el-button>
     <div class="dir_wrap">
      <el-table  @current-change="tabelChange"   highlight-current-row :data="dirList" border style="width:100%;">
        <el-table-column prop="CDName"  label="目录名称"></el-table-column>
        <el-table-column prop="CourseNumber" label="课件数"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div>
                <el-link type="success" @click="editDir(scope.row)">编辑</el-link>
                <el-link type="danger" @click="delDirs(scope.row._id)">删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
     </div>
     <el-dialog width="40%" v-model="dirFlag" :title="dirtitle">
        <el-input v-model="CDName" ></el-input>
       <template #footer>
         <div>
            <el-button type="primary" @click="addDirs" >确定</el-button>
            <el-button type="danger" @click="close">取消</el-button>
         </div>
       </template>
     </el-dialog>
  </div>
</template>

<script lang="ts"> 
import {ref,reactive,provide,toRefs,defineComponent, computed} from 'vue'
import {addDir,getCourseDir,delDir,editDirApi} from '../../api/course'
import { useRoute,onBeforeRouteUpdate} from 'vue-router';
import { ElMessage } from 'element-plus/lib/components';
import $bus from '../../utils/bus'
interface dirFaca{
  dirFlag:boolean,
  CDName:string,
  dirList:Array<any>,
  openDir():void,
  close():void,
  editDirid:string,
  dirtitle:string,
  addDirs():void,
  getCourseDirs():void,
  delDirs(dir_id:any):void
}
export default defineComponent({

  setup(){
      let route=useRoute();
      let dirData:dirFaca=reactive({
         dirFlag:false,
         dirtitle:"添加目录",
         dirList:[],//目录列表
         CDName:"",//目录名称
         editDirid:"",
         openDir(){//打开弹出层
           dirData.dirFlag=true;
         },
         close(){
           dirData.dirFlag=false;
         },
         tabelChange(row:any){ //目录被选中 目录切换
            // console.log(row)
            // 兄弟传参
            $bus.emit("senddir",row)
         },
         editDir(row:any){
           console.log(row)
            dirData.CDName=row.CDName;
            dirData.dirFlag=true;
            dirData.editDirid=row._id; //编辑id
            dirData.dirtitle="编辑目录";
         },
         async getCourseDirs(){ //获取课程下的目录
            if(route.query.c_id){ //如果有课程id存在 获取课程下的目录
              var res:any=await  getCourseDir({
                  CDid:route.query.CDid
              })  
              console.log(res);
             dirData.dirList=res.data.list;
            }
         },
         async delDirs(dir_id:any){ //删除目录
              var res=await delDir({
                       CDid:route.query.c_id,//课程的_id
                      _id: dir_id //目录_id
              })
              console.log(res)
              ElMessage.success("删除成功");
              dirData.getCourseDirs();//从新获取列表
         },
         async addDirs(){ //添加目录接口
          if(dirData.editDirid){ //如果有编辑id  进行编辑
              var eidtRes:any=await editDirApi({
                   dirid:dirData.editDirid,//目录_id
                   CDName:dirData.CDName, //目录的名称
                   CDid:route.query.CDid, //课程ID 
                  _id: route.query.c_id //课程_id
              })
              console.log(eidtRes)
               dirData.dirList=eidtRes.data.list;
          }else{
              var res:any=await addDir({
              CDName:dirData.CDName,
              CDid:route.query.CDid,
              _id: route.query.c_id
              })
             console.log(res);
                dirData.dirList=res.data.list;
          }
      
           ElMessage.success("目录添加成功")
           dirData.CDName=""
           dirData.dirFlag=false;
       
         }
      })
      dirData.getCourseDirs()
      // 清空目录
      $bus.on('cleardir',()=>{
         dirData.dirList=[];
      })
      let mydata=toRefs(dirData)
      return {
        ...mydata
      }
  }
})
</script>

<style lang="less" scoped>
   
  .dir_wrap{
    width: 100%;
    width: 500px;
    background: white;
    // /deep/可以用来 加scoped后修改elmentui的组件样式  
    /deep/.el-table__body tr.current-row > td.el-table__cell {
      background: deeppink;
      color: white;
    }
  }
 
</style>